<template>
  <view class="content">
    <view
      v-if="!modelValue"
      class="qianming"
      :class="{ disabled: disabled }"
      @click="doss"
      >点击签名</view
    >
    <!-- :class="{ disabledimg: disabled }"        @click="doss" -->
    <view v-else class="imgs">
      <image
        class="img"
        :src="formatSrc(modelValue)"
        style="height: 150upx"
      ></image>
    </view>
  </view>
</template>
<script setup>
import {
  reactive,
  defineProps,
  defineEmits,
  defineExpose,
  getCurrentInstance,
} from "vue";
import { BASE_FILE_URL } from "@/utils/requset.js";
import { formatSrc } from "@/utils/index.js";

const proxy = getCurrentInstance();
const props = defineProps({
  /**当前双向数据绑定的值 */
  modelValue: {
    type: String || Number,
    default: "",
  },
  canvasId: {
    type: [String, Number],
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  open: {
    type: Function,
  },
});
const emits = defineEmits(["update:modelValue", "change"]);
const state = reactive({
  img: "",
  isShow: false,
});
const doss = () => {
  if (props.disabled) {
    return;
  }
  props.open(proxy);
  // state.isShow = true;
};
const close = () => {
  state.isShow = false;
};
const save = (val) => {
  state.isShow = false;
  state.img = val;
  emits("update:modelValue", val);
  emits("change", val);
};
defineExpose({
  save,
});
</script>
<style>
.imgs {
  /* width: 94%; */
  height: 150upx;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  background-color: #fff;
}
.imgs img {
  /* width: 100%; */
  height: 150upx;
}
.qianming {
  /* width: 94%; */
  height: 150upx;
  border: 1px dashed #333;
  font-size: 30px;
  line-height: 150upx;
  text-align: center;
}

.disabled {
  background-color: #eee;
  color: #aaa;
}

.disabledimg {
  opacity: 0.5;
}
</style>
